<h1>Flickr Search</h1>
<div id="changelist">
    <div id="toolbar">
        <form action="/admin/djangollery/flickrphoto/flickr" method="GET">
            <label for="searchbar">
        <img alt="Search" src="/media/img/admin/icon_searchbox.png"/>
        </label>
        {{ form.text }}
        <input type="submit" id="submitSearch" value="Ir" />
        </form>
    </div>
    {% if photos %}
        <table>
        <tbody>
        {% for photo in photos %}
            {% cycle '<tr class="rowl" style="height:120px;"><td>' '<td>'  '<td>' %}
            <div sytle="width:100px; height:100px;">
				<a href="#" onclick="return selectFickrImage('{{photo.id}}')" >
                	<img src="{{ photo.urlThumbnail }}" ></img>
				</a>
            </div>
            {% cycle '</td>' '<td>'  '<td></tr>' %}
        {% endfor %}
        </tbody>
        </table>
        <div class="pagination">
            <span class="step-links">
                {% if previous_page %}
                    <a href="#" onclick="return searchFlickr('{{text}}',{{ previous_page }})">&laquo;</a>
                {% endif %}

                <span class="current">
                    Pagina {{ page }} de {{ pages }}.
                </span>

                {% if next_page %}
                    <a href="#" onclick="return searchFlickr('{{text}}',{{ next_page }})">&raquo;</a>
                {% endif %}
            </span>
        </div>
    {% endif %}
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#submitSearch").click(function(){
            var text = $("#id_text").val();
            searchFlickr(text,1)
            return false;
        });
    });
    
	// Realiza la petición de busqueda para una página en concretp
    function searchFlickr(text,page) {
        $.get("/admin/djangollery/flickrphoto/flickr/", { text: text, page:page },
              function(data){
                $("#TB_ajaxContent").html(data);
              });
		return false;
    }

	function selectFickrImage(id) {
		$.getJSON("/admin/djangollery/flickrphoto/flickr/select/", { id: id },
              function(data){
               	if(data.status=="ok") {
					$("#id_thumbnail").val(data.Thumbnail);
					$("#id_img_thumbnail").attr('src',data.Thumbnail);		
					$("#id_display").val(data.Medium);
					$("#id_link_display").attr('href',data.Medium);	
					$("#id_link_display").text(data.Medium);	
					$("#id_original").val(data.Original);
					$("#id_link_original").attr('href',data.Original);	
					$("#id_link_original").text(data.Original);
					tb_remove();
				}
				else {
					alert("error");
				}
              });
		
		return false;
	}
</script>